<template>
	<view class="nav">
		<view :style="'height: ' + status + 'rpx;' + containerStyle"></view>
		<view v-if="isHome" class="headNav" :style="'height: ' + navHeight + 'rpx;line-height: ' + navHeight + 'rpx; padding-left:20rpx;'">
			<text class="city">中部地区</text>
			<view style="flex: 1">
				<navigator
					url="../../pages/search/index"
					:style="'height:' 
						+ menu.height*2 + 'rpx;line-height:'
						+ menu.height*2 + 'rpx; margin-top: '
						+ (menu.top*2 - status) 
						+ 'rpx; margin-left: 32rpx; margin-right: '
						+ (menu.width*2 + 24)
						+ 'rpx; background: #f4f4f4; border-radius: 200rpx; text-align: center'"
				>
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>
		<view v-else class="navbar" :style="'height: ' + navHeight + 'rpx;' + containerStyle">
			<view class="back-icon" @click="backOrHome">
				<image v-if="pages > 1" src="@/static/resource/navBar/back.png"></image>
				<image v-else src="@/static/resource/images/tab_index.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height: ' + navHeight + 'rpx;line-heifht: ' + navHeight + 'rpx;'">{{titleText}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, onBeforeMount, defineProps } from 'vue'
	const props = defineProps({
		background: {
			type: String,
			default: 'rgba(255, 255, 255, 1)'
		},
		color: {
			type: String,
			default: 'rgba(0, 0, 0, 1)'
		},
		fontSize: {
			type: String,
			default: 32
		},
		iconWidth: {
			type: String,
			default: 116
		},
		iconHeight: {
			type: String,
			default: 38
		},
		titleText: {
			type: String,
			default: ''
		},
		isHome: {
			type: Boolean,
			default: false
		}
	})
	onBeforeMount(() => {
		setNavSize()
		setStyle()
	})
	//设置背景颜色
	const containerStyle = ref('')
	//设置字体样式
	const textStyle = ref('')
	//设置图标样式
	const iconStyle = ref('')
	//设置状态栏高度
	const status = ref(0)
	//设置内容高度
	const navHeight = ref(0)
	//页面栈的数量
	const pages = ref(getCurrentPages().length)
	//获取胶囊的位置
	const menu = reactive(uni.getMenuButtonBoundingClientRect())
	// console.log(menu.value)
	//计算状态栏高度
	const setNavSize = () => {
		const { system, statusBarHeight } = uni.getSystemInfoSync()
		status.value = statusBarHeight * 2
		const isiOS = system.indexOf('iOS') > -1
		if(!isiOS) {
			navHeight.value = 96
		}else {
			navHeight.value = 88
		}
		// console.log(res)
	}
	//样式设置
	const setStyle = () => {
		containerStyle.value = ['background: ' + props.background].join(';')
		textStyle.value = ['color: ' + props.color, 'font-size: ' + props.fontSize + 'rpx'].join(';')
		iconStyle.value = ['width: ' + props.iconWidth + 'rpx', 'height: ' + props.iconHeight + 'rpx'].join(';')
	}
	const backOrHome = () => {
		if(pages.value > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
</script>

<style>
.nav {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
.back-icon {
	display: flex;
	align-items: center;
	width: 64rpx;
	height: 100%;
	margin-left: 20rpx;
	margin-top: 25rpx;
}
.back-icon image {
	width: 64rpx;
	height: 64rpx;
}
.navbar {
	position: relative;
}
.nav-title {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
}
.headNav {
	display: flex;
}
.city {
	display: inline-block;
	position: relative;
	font-size: 30rpx;
	font-weight: bold;
	align-items: center;
	padding-left: 55rpx;
	background: url('../../static/resource/navBar/map.png')
		no-repeat left center;
	background-size: 40rpx;
}
.city:after {
	content: ' ';
	display: inline-block;
	height: 6px;
	width: 6px;
	border-width: 1px 1px 0 0;
	border-color: #353535;
	border-style: solid;
	-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	position: relative;
	top: -2px;
	position: absolute;
	top: 50%;
	margin-top: -4px;
	right: -10px;
}
.search-text {
	display: inline-block;
	padding-left: 30rpx;
	color: #bbbbbb;
	font-size: 26rpx;
	background: url('../../static/resource/navBar/search.png') no-repeat left center;
	background-size: 23rpx;
}
</style>